<script setup>
import { ref, watch, nextTick, onMounted } from 'vue'
import { mainStore } from '@store'
import { _getVideoList, _getVideoIpPort } from '/src/api/perceivedEffect/main.js'
import videoRet from './VideoRet.vue'

const store = mainStore()

const webRtcServerer = {}

let rtcConfig = ref(null)
const getVideoIpPort = async () => {
  const res = await _getVideoIpPort()
  rtcConfig.value = res.data.data
}

const createrVideo = (id, url) => {
  const { ip, port } = rtcConfig.value

  webRtcServerer[id] = new WebRtcStreamer(id, `http://${ip}:${port}`, {
    video: true,
    audio: false,
    rtptransport: 'tcp',
    timeout: 60,
  })

  webRtcServerer[id].connect(url)
}

const getVideoList = async () => {
  try {
    const res = await _getVideoList()
    if (res.data.code == 200) {
      store.videoBoxList = res.data.data['rtsp-url-list']
      console.log(store.videoBoxList)
    }
  } catch (error) {
    console.error('获取视频列表失败', error)
  }
}

const dialogVisible = ref(false)

let activeMaxId = ref(null)
let lastClickTime = null // 记录点击时间
let activeMaxdec = ref(null)
const dblclickVideo = (item) => {
  const now = Date.now() // 当前时间戳
  // 双击事件
  if (now - lastClickTime <= 300) {
    activeMaxId.value = item.id
    activeMaxdec.value = item.dec
    dialogVisible.value = true
    setTimeout(() => {
      createrVideo('maxVideo', item.url)
    }, 10)
  } else {
    //单击事件
    // 切换事件
    // console.log('切换')
  }

  lastClickTime = now // 记录这次点击的时间
}

const changeAngle = (param) => {
  window.ThreePerceivedEffect.updateAngle(param)
}

const closeDiglog = () => {
  dialogVisible.value = false
  // 清理rtc的播放
}

onMounted(() => {
  nextTick(async () => {
    await getVideoIpPort()
    await getVideoList()

    store.videoBoxList.forEach((item) => {
      const id = 'video_' + item.id
      createrVideo(id, item.url)
    })
    videoScale()
  })
})

// 计算视频缩放的大小
let w = ref('0px')
let h = ref('0px')
let container = ref()
let videoMaxScale = ref(0.9)
const videoScale = () => {
  w.value = 1920 * store.videoScale + 'px'
  h.value = 1080 * store.videoScale + 'px'

  container.value = document.querySelector('.videoData-container').getBoundingClientRect()
  videoMaxScale.value = container.value.width > 1620 ? 1.4 : 0.9
}

watch(
  () => store.videoScale,
  (newValue, oldValue) => {
    if (newValue != oldValue) videoScale()
  }
)
</script>

<template>
  <div class="videoData-container">
    <div class="title">
      <span>视频数据</span>
      <span>{{ store.empyTip }}</span>
    </div>

    <div class="show" v-if="store.videoBoxList.length != 0">
      <!-- 视频框 -->
      <div class="videoBox" @click="dblclickVideo(item)" v-for="(item, index) in store.videoBoxList" :key="index" :style="{ width: w, height: h }">
        <video :id="`video_${item.id}`" autoplay muted></video>
        <p class="tip" @click="changeAngle(item)">{{ `${item.dec}--相机id：${item.id}` }}</p>
        <videoRet :key="store.reloadVideoRet" class="video-ret" :deviceId="item.id" :style="{ transform: `scale(${store.videoScale})` }" />
      </div>
    </div>

    <!-- 弹出的放大视频 -->
    <div class="mask" @click="closeDiglog" v-if="dialogVisible" :style="{ width: container.width + 'px', height: container.height + 'px' }">
      <div class="video-max" :style="{ transform: `scale(${videoMaxScale})` }">
        <p class="tip">{{ `${activeMaxdec}--相机id：${activeMaxId}` }}</p>
        <video style="width: 100%; height: 100%; object-fit: fill" id="maxVideo" autoplay muted></video>
        <videoRet class="video-maxRet" :deviceId="activeMaxId" />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.mask {
  position: fixed;
  top: 110px;
  z-index: 9;
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;

  .video-max {
    width: 960px;
    height: 540px;
    transform: 0 0;
    border: 2px solid rgb(36, 208, 73);
    position: relative;

    .tip {
      font-size: 32px;
      background: rgba(171, 249, 54, 0.5);
      position: absolute;
      top: 0;
      right: 0;
      z-index: 20;
      padding: 0 4px;
      border-radius: 4px;
    }

    .video-maxRet {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 9;
    }
  }
}

.videoData-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.video-ret {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
}

.show {
  width: 100%;
  min-height: 180px;
  max-height: 820px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 6px;
  overflow-y: auto;
  overflow-y: auto;

  .videoBox {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    .tip {
      font-size: 16px;
      cursor: pointer;
      background: rgba(171, 249, 54, 0.5);
      position: absolute;
      top: 0;
      right: 0;
      z-index: 20;
      padding: 0 4px;
      border-radius: 4px;
    }
    > video {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
}

.title {
  display: flex;
  align-items: center;
  font-size: 14px;
  > span:nth-child(2) {
    margin-left: 10px;
    color: red;
  }
}

.tipItem {
  border: 2px solid green;
  position: absolute;
  z-index: 33;
  cursor: pointer;
}

.load {
  width: 500px;
  height: 500px;
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: rebeccapurple;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<style lang="less">
.videoData-container {
  .el-checkbox {
    height: 100%;
    margin-top: 6px;
  }
}
</style>
